﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no">
    <title>基于浏览器的HTML5地理定位</title>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <style>
        #container {
            margin: 20px auto;
        }

            #container span {
                position: relative;
            }

            #container .input_check {
                position: absolute;
                visibility: hidden;
            }

                #container .input_check + label {
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    border: 1px solid #fd8845;
                }

                #container .input_check:checked + label:after {
                    content: "";
                    position: absolute;
                    left: 2px;
                    bottom: 12px;
                    width: 9px;
                    height: 4px;
                    border: 2px solid #fd8845;
                    border-top-color: transparent;
                    border-right-color: transparent;
                    -ms-transform: rotate(-60deg);
                    -moz-transform: rotate(-60deg);
                    -webkit-transform: rotate(-60deg);
                    transform: rotate(-45deg);
                }
    </style>

</head>
<body onload="onload()">
    <div id="allmap" style="height:250px;"></div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=p2TmwerE1yfUcUbwRGnFYT38Wn9hO3qp&coor=bd09ll"></script>
    <script type="text/javascript">
        var map = new BMap.Map("allmap");//创建地图实例
        //页面初始化
        function onload() {
            //初始化地图 默认加载北京天安门
            var point = new BMap.Point(116.331398, 39.897445);
            map.centerAndZoom(point, 16);//初始化地图，point为中心点，缩放级别为16
            //判断手机浏览器是否支持定位
            if (navigator.geolocation) {
                var geolocation = new BMap.Geolocation();//创建定位实例
                geolocation.getCurrentPosition(showLocation, { enableHighAccuracy: true });//enableHighAccuracy 要求浏览器获取最佳结果
            } else {
                map.addControl(new BMap.GeolocationControl());//添加定位控件 支持定位
            }
        }
        //处理定位后的信息
        function showLocation(r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {//定位成功
                //新建中心点 并将地图中心移动过去
                var centerPoint = new BMap.Point(r.longitude, r.latitude);
                map.panTo(centerPoint);
                map.setCenter(centerPoint);
                //新建标注
                var mk = new BMap.Marker(centerPoint);
                mk.disableDragging();// 不可拖拽
                map.addOverlay(mk);

                var geoc = new BMap.Geocoder();
                geoc.getLocation(centerPoint, getCityByCoordinate);
                //单击新地址
                map.addEventListener("click", function (e) {
                    var pt = e.point;
                    geoc.getLocation(pt, function (rs) {
                        //新建中心点 并将地图中心移动过去
                        var centerPoint = new BMap.Point(pt.lng, pt.lat);
                        map.panTo(centerPoint);
                        map.setCenter(centerPoint);

                        //删除以前的标注
                        map.removeOverlay(mk);

                        //新建标注
                        mk = new BMap.Marker(centerPoint);
                        mk.disableDragging();// 不可拖拽
                        map.addOverlay(mk);

                        var addComp = rs.addressComponents;
                        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);

                    });
                });
            }
            else {
                alert('failed' + this.getStatus());//定位失败
            }
        }

        function getCityByCoordinate(rs) {
            var addComp = rs.addressComponents;
            alert(addComp);
            alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);

        }
    </script>





    <h3>利用css的：after跟transform属性代替checkbox效果</h3>
    <div id="container">
        <span><input type="checkbox" class="input_check" id="check3"><label for="check3"></label></span>
        <span><input type="checkbox" class="input_check" id="check4"><label for="check4"></label></span>
    </div>
</body>
</html>
